import React from 'react';
import { Link } from 'react-router-dom';
import { useLocalization } from '../hooks/useLocalization';
import { SITE_NAME } from '../constants';

const Footer: React.FC = () => {
    const { t, getLocalizedPath } = useLocalization();
    const currentYear = new Date().getFullYear();

    const footerLinks = [
        { key: 'faq', path: 'faq' },
        { key: 'contact_us', path: 'contact' },
        { key: 'terms_of_service', path: 'terms-of-service' },
        { key: 'privacy_policy', path: 'privacy-policy' },
    ];

    return (
        <footer className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
            <div className="container mx-auto py-8 px-4 sm:px-6 lg:px-8">
                <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                    <div className="text-center md:text-left">
                        <p className="text-sm text-gray-500 dark:text-gray-400">
                            &copy; {currentYear} {SITE_NAME}. {t('all_rights_reserved')}
                        </p>
                    </div>
                    <nav className="flex flex-wrap justify-center space-x-4 md:space-x-6">
                        {footerLinks.map(link => (
                            <Link
                                key={link.key}
                                to={getLocalizedPath(`/${link.path}`)}
                                className="text-sm text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary-light transition-colors duration-200"
                            >
                                {t(link.key)}
                            </Link>
                        ))}
                    </nav>
                </div>
            </div>
        </footer>
    );
};

export default Footer;